<template>
  <a-modal :maskClosable="false"
    :title="title"
    :width="1024"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOkAndCheck"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" v-bind="layout" :model="model" :rules="validatorRules">
        <a-form-model-item label="方案名称" required prop="name">
          <a-input placeholder="请输入方案名称" v-model="model.name" />
        </a-form-model-item>
        <a-form-model-item label="排班周期" required prop="type">
          <a-select placeholder="排班周期" v-model="model.type">
            <a-select-option value="0">周</a-select-option>
            <!--            <a-select-option value="1">月</a-select-option>-->
          </a-select>
        </a-form-model-item>
      </a-form-model>


      <a-button @click="handleAdd" type="primary" icon="plus" style="margin-top: 16px">新增班次</a-button>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        style="margin-top: 10px"
      >
        <template slot="planName" slot-scope="text, record, index">
          <a-select v-model='record.planName' placeholder='请选择班次时间' style="width: 130px">
            <a-select-option value='早上'>早上</a-select-option>
            <a-select-option value='下午'>下午</a-select-option>
            <a-select-option value='晚上'>晚上</a-select-option>
            <a-select-option value='全天'>全天</a-select-option>
          </a-select>
        </template>
        <template slot="startTime" slot-scope="text, record, index">
          <a-time-picker v-model="record.startTime" format="HH:mm" valueFormat="HH:mm" style="width: 180px;" />
        </template>
        <template slot="endTime" slot-scope="text, record, index">
          <a-time-picker v-model="record.endTime" format="HH:mm"  valueFormat="HH:mm" style="width: 180px;" />
        </template>
        <span slot='action' slot-scope='text, record,index'>
          <a @click='handleRemove(index)' >删除</a>
        </span>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { getAction, postAction, deleteAction, httpAction } from '@/api/manage'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { FormTypes } from '@/utils/JEditableTableUtil'
import moment from 'moment'

export default {
  name: 'hHisSchedulingPlanModal',
  mixins: [JEditableTableMixin],
  data() {
    return {
      title: '操作',
      visible: false,
      model: {
        id: 0,
        type: '0'
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 }
      },
      confirmLoading: false,
      validatorRules: {
        name: [{ required: true, message: '请输入方案名称!' }],
        type: [{ required: true, message: '请输入排班周期!' }]
      },
      url: {
        get: '/his/scheduling/plan',
        add: '/his/scheduling/plan',
        edit: '/his/scheduling/plan'
      },
      minWidth: 200,
      refKeys: ['projectDataTable'],
      loading: false,
      dataSource: [],
      columns: [
        {
          title: '班次名称',
          dataIndex: 'planName',
          width: '18%',
          align: 'center',
          scopedSlots: { customRender: 'planName' }
        },
        {
          title: '开始时间', dataIndex: 'startTime', width: '20%', align: 'center',
          scopedSlots: { customRender: 'startTime' }
        },
        {
          title: '结束时间', dataIndex: 'endTime', width: '20%', align: 'center',
          scopedSlots: { customRender: 'endTime' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: '8%',
        }
      ]
    }
  },
  created() {
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    //提交单据时整理成formData
    classifyIntoFormData(allValues) {
      const that = this
      let detailArr = allValues.tablesValue[0].values
      return {
        id: that.model.id,
        name: that.model.name,
        type: that.model.type,
        rows: JSON.stringify(detailArr)
      }
    },
    //保存并审核
    handleOkAndCheck() {
      const that = this
      if(this.dataSource.length==0){
        that.$message.warning("请输入班次信息")
        return;
      }
      this.model.rows=this.dataSource;
      postAction(this.url.add, this.model).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('ok')
          that.close()
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
      })
    },
    initTable() {
      // this.projectDataTable.dataSource = []
      // this.projectDataTable.dataSource.push({ 'planId': '1', 'planName': '早上', 'startTime': '', 'endTime': '' })
      // this.projectDataTable.dataSource.push({ 'planId': '2', 'planName': '下午', 'startTime': '', 'endTime': '' })
      // this.projectDataTable.dataSource.push({ 'planId': '3', 'planName': '晚上', 'startTime': '', 'endTime': '' })
    },
    add() {
      this.model = Object.assign({}, {})
      this.model.type = '0'
      this.initTable()
      this.visible = true
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      const that = this
      getAction(this.url.get + '/' + record.id).then(res => {
          if (res.success) {
            that.model = res.result
            that.projectDataTable.dataSource = res.result.rows
          }
        }
      )
    },
    close() {
      this.$refs.form.clearValidate()
      this.$emit('close')
      this.visible = false
    },

    handleCancel() {
      this.close()
    },
    handleAdd() {
      this.dataSource.push({ 'planName': '', 'startTime': '', 'endTime': '' })
    },
    handleRemove(index) {
      this.dataSource.splice(index, 1);
    }
  }
}
</script>

<style scoped>

</style>